<template>
	<div class="el-box">
		<TopNav v-if="!fromUserCenter"></TopNav>
		<div class="el-body-box">
			<el-main class="el-main">

				<div class="statistics clearFix">
					<div class="allShop">
						全部商品<label>（{{AllPiece}}）</label>
					</div>
				</div>

				<el-row class="el-rows">
					<el-col :span="3">
						<el-checkbox v-model="checkedAll" @change="handleCheckAll">全选</el-checkbox>
					</el-col>
					<el-col :span="5">
						<label>商品信息</label>
					</el-col>
					<el-col :span="3">
						<label>服务类型</label>
					</el-col>
					<el-col :span="3">
						<label>单价</label>
					</el-col>
					<el-col :span="4">
						<label>数量</label>
					</el-col>
					<el-col :span="3">
						<label>金额</label>
					</el-col>
					<el-col :span="3" style="text-align: center;">
						<label>操作</label>
					</el-col>
				</el-row>

				<div class="typeList">
					<div class="typeinner" v-if="cartList.length>0" v-for="item in cartList" :key="item.id">
						<div class="typeAll">
							<el-checkbox v-model="item.isChecked" @change="handleCheckSystem(item)">{{item.commodityName}}</el-checkbox>
						</div>

						<!--如果是课程则显示该节点-->
						<el-row class="type-row" v-if="item.detailVoList" v-for="list in item.detailVoList" :key="list.detailId">
							<el-col :span="8">
								<div class="cover">
									<el-checkbox v-model="list.isChecked"  @change="handleCheckChang(item)"></el-checkbox>
									<el-image @click="$router.push({path:'/detail',query:{id:list.commodityId}})" :src="list.detailCover?imgBaseUrl+list.detailCover:src"></el-image>
								</div>
								<div class="textDeteil">
									<h3>{{list.detailName}}</h3>
									<p>
										<label>{{list.gradeName}}</label>
										<el-divider direction="vertical"></el-divider>
										<label>{{list.volumeName}}</label>
										<el-divider direction="vertical"></el-divider>
										<label>{{list.subjectName}}</label>
										<el-divider direction="vertical"></el-divider>
										<label>{{list.versionName}}</label>
									</p>
								</div>
							</el-col>
							<el-col :span="3">
								<div class="vertical">

								</div>

							</el-col>
							<el-col :span="3">
								<div class="vertical">
									<label>&yen;{{list.detaiPrice}}</label>
								</div>
							</el-col>
							<el-col :span="4">
								<div class="vertical">
									<el-input-number size="small" @change="handleNumberChange(list.shoppingCarId,item.cosePayCount,true)" v-model="list.cosePayCount" :min="1" :max="10"></el-input-number>
								</div>
							</el-col>
							<el-col :span="3">
								<div class="vertical">
									<label class="sum">
										&yen;<span>{{list.sumMoney}}</span>
									</label>
								</div>
							</el-col>
							<el-col :span="3">
								<div class="vertical">
									<div class="typeBtn">
										<label class="collected" v-if="list.courseCollection">已加入收藏夹</label>
										<el-button size="mini" v-else type="primary" style="margin-bottom: 10px" @click="handleSingleAddCollection(list.commodityId)">加入收藏夹</el-button>
										<el-button size="mini" type="primary" @click="handleDeleteCart(list.shoppingCarId,list.detailName)">移除购物车</el-button>
									</div>
								</div>

							</el-col>
						</el-row>

						<!--如果是主系统则显示该节点-->
						<el-row class="type-row" v-if="!item.detailVoList">
							<el-col :span="8">
								<div class="cover">
									<el-checkbox v-model="item.isChecked"  @change="handleCheckChang(item)"></el-checkbox>
									<el-image @click="$router.push({path:'/detail',query:{id:item.commodityId}})" :src="item.commodityImgurl?imgBaseUrl+item.commodityImgurl:src"></el-image>
								</div>
								<div class="textDeteil">
									<h3>{{item.commodityName}}</h3>
								</div>
							</el-col>
							<el-col :span="3">
								<div class="vertical">
									<label v-if="item.beOverdue === 1">免费</label>
									<label v-if="item.beOverdue === 2">包月</label>
									<label v-if="item.beOverdue === 3">包年</label>
								</div>

							</el-col>
							<el-col :span="3">
								<div class="vertical">
									<label>&yen;{{item.price}}</label>
								</div>
							</el-col>
							<el-col :span="4">
								<div class="vertical">
									<el-input-number size="small" @change="handleNumberChange(item.id,item.payCount,false)" v-model="item.payCount" :min="1" :max="10"></el-input-number>
								</div>
							</el-col>
							<el-col :span="3">
								<div class="vertical">
									<label class="sum">
										&yen;<span>{{item.sumMoney}}</span>
									</label>
								</div>
							</el-col>
							<el-col :span="3">
								<div class="vertical">
									<div class="typeBtn">
										<label class="collected" v-if="item.collection">已加入收藏夹</label>
										<el-button size="mini" v-else type="primary" style="margin-bottom: 10px" @click="handleSingleAddCollection(item.commodityId)">加入收藏夹</el-button>
										<el-button size="mini" type="primary" @click="handleDeleteCart(item.id,item.commodityName)">移除购物车</el-button>
									</div>
								</div>

							</el-col>
						</el-row>
					</div>

					<div class="cartSpace" v-if="cartList.length<=0">
						<i class="iconfont iconempty"></i>
						<span>哎呀~ 购物车里空空的。</span>
						<el-button type="text" @click="$router.push({path:'/'})">去逛逛</el-button>
					</div>
				</div>


				<div class="loadingMore" v-if="false">
					<el-button type="text">加载更多</el-button>
				</div>

				<div class="census clearFix" v-if="cartList.length>0">
					<div class="btn">
						<el-button type="text" style="color:rgba(227,36,36,1);margin-left: 30px;" @click="handleSelectDelete">删除</el-button>
						<el-button type="text" style="margin-left: 20px;" @click="handelSelectAddCollection">加入收藏夹</el-button>
					</div>
					<div class="settlement ">
						<div class="sumPrice">
							<label>已选商品：{{totalPiece}}件</label>
							<label class="heji">合计：<span>&yen;{{sumPrice}}</span></label>
						</div>
						<el-button type="primary" style="width:130px; border-radius:0;" @click="handleSettlement">结算</el-button>
					</div>
				</div>


			</el-main>
		</div>
	</div>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
<!-- 只在当前页面起作用 -->
<!-- <style lang="scss" scoped src="./index.scoped.scss"></style> -->
<!-- 全面页面起作用，先不作推荐 -->
